import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { CalendarOutline } from 'antd-mobile-icons'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'
import { Avatar } from 'antd-mobile'

function DoctorList() {
  const navigate = useNavigate()
  const [selectedDate, setSelectedDate] = useState('周一 今日')

  // 日期数据
  const dates = [
    { id: 'all', label: '全部日期' },
    { id: 'monday', label: '周一 今日', isSelected: true },
    { id: 'tuesday', label: '周二 29' },
    { id: 'wednesday', label: '周三 30' },
    { id: 'thursday', label: '周四 31' },
    { id: 'friday', label: '周五 1' }
  ]

  // 医生数据
  const doctors = [
    {
      id: 1,
      name: '刘医生',
      title: '主任医师',
      department: '门诊外一科',
      specialty: '擅长: 肛肠外科 (肛肠良性基本), 结直肠微创手...',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.WJlM1ncsKLaS1d99La0ErwHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
      availability: '余20号',
      isAvailable: true
    },
    {
      id: 2,
      name: '杨医生',
      title: '副主任医师',
      department: '门诊外一科',
      specialty: '擅长: 肛肠外科 (肛肠良性基本), 结直肠微创手...',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.cCFSMoG5pMWORIqK5dy2eQHaHa?w=200&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
      availability: '余10号',
      isAvailable: true
    },
    {
      id: 3,
      name: '刘医生',
      title: '主任医师',
      department: '门诊外一科',
      specialty: '擅长: 肛肠外科 (肛肠良性基本), 结直肠微创手...',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.rtCx4EWH5sqN-b4A3CgC7QHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
      availability: '余30号',
      isAvailable: true
    },
    {
      id: 4,
      name: '章医生',
      title: '副主任医师',
      department: '门诊外一科',
      specialty: '擅长: 肛肠外科 (肛肠良性基本), 结直肠微创手...',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.I9E3NywN6414d-eNHE-wVQHaHZ?w=177&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
      availability: '已约满',
      isAvailable: false
    }
  ]

  const handleDateSelect = (dateId: string) => {
    setSelectedDate(dates.find(d => d.id === dateId)?.label || '')
  }

  const handleDoctorSelect = (doctorId: number) => {
    console.log('选择医生:', doctorId)
    // 跳转到医生排班页面
    navigate(`/doctor_schedule/${doctorId}`)
  }

  return (
    <div className={styles.page}>
      <Nabar title='医生列表' sticky={false} />
      
      <div className={styles.content}>
        {/* 科室标题 */}
        <div className={styles.departmentTitle}>
          门诊外一科
        </div>

        {/* 日期选择 */}
        <div className={styles.dateSection}>
          <div className={styles.dateHeader}>
            <div className={styles.monthYear}>2020年1月</div>
            <CalendarOutline className={styles.calendarIcon} />
          </div>
          
          <div className={styles.dateList}>
            {dates.map((date) => (
              <div
                key={date.id}
                className={`${styles.dateItem} ${selectedDate === date.label ? styles.selectedDate : ''}`}
                onClick={() => handleDateSelect(date.id)}
              >
                {date.label}
              </div>
            ))}
          </div>
        </div>

        {/* 医生列表 */}
        <div className={styles.doctorList}>
          {doctors.map((doctor) => (
            <div
              key={doctor.id}
              className={styles.doctorItem}
              onClick={() => handleDoctorSelect(doctor.id)}
            >
              <div className={styles.doctorAvatar}>
                 <Avatar src={doctor.avatar}/>
              </div>
              
              <div className={styles.doctorInfo}>
                <div className={styles.doctorName}>
                  {doctor.name}
                  <span className={styles.doctorTitle}>{doctor.title}</span>
                </div>
                
                <div className={styles.doctorDepartment}>
                  {doctor.department}
                </div>
                
                <div className={styles.doctorSpecialty}>
                  {doctor.specialty}
                </div>
              </div>
              
              <div className={styles.availabilityContainer}>
                <button
                  className={`${styles.availabilityBtn} ${doctor.isAvailable ? styles.available : styles.unavailable}`}
                >
                  {doctor.availability}
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default DoctorList
